<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>类别信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/icons/favicon.ico">
    <link rel="apple-touch-icon" href="images/icons/favicon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="styles/jquery-ui-1.10.4.custom.min.css">
    <link type="text/css" rel="stylesheet" href="styles/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/all.css">
    <link type="text/css" rel="stylesheet" href="styles/main.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap-datetimepicker.css">
	<link type="text/css" rel="stylesheet" href="styles/bootstrap-datetimepicker.min.css">
	
	<style>
	/*分页时底部样式*/
	.dibu-r ul,li{margin:0;padding:0;}
	.dibu-r ul{list-style:none;}
	.dibu{ width:100%;  margin:auto;font-size:18px; font-family:"微软雅黑"; color:#6f6e6e;  margin-top:15px; margin-bottom:50px;}
	.dibu span{ color:#3792f2;}
	.dibu p{ float:left;}
	.dibu-l{ float:left; width:60%;}
	.dibu-r{ float:right; width:40%; }
	.dibu-r li{ float:left; margin-right:10px; font-size:18px; font-family:"微软雅黑"; color:#8b8d90;}
	.dibu-r a{ float:left; margin-right:10px; margin-top:4px;}
	.xiala-yema{ width:42px; height:22px; border:#d3d5db 1px solid; border-radius:3px; color:#6f6e6e; font-size:14px;}
	.yema-xz{ color:#fd9162;}
	.dibu-r a:hover{filter:alpha(opacity=70); -moz-opacity:0.7;opacity:0.7; cursor:pointer;}
	.dibu-r li:hover{filter:alpha(opacity=70); -moz-opacity:0.7;opacity:0.7; cursor:pointer;}
	</style>
	
</head>
<body onload="getTicket(1)">
<!-- 页面内容开始 -->
<div class="page-content">
    <div id="tab-general">
        <div class="row mbl">
            <div class="col-lg-12">
                <div class="col-md-12">
                    <div id="area-chart-spline" style="width: 100%; height: 300px; display: none;"></div>
                </div>                                
            </div>

            <div class="col-lg-12">
				<div class="row">
                    <div class="col-md-12">					
                        <div class="row mtl">
                            <div class="col-md-1"></div>
                            <div class="col-md-10">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#tab-edit" data-toggle="tab">优惠券录入</a></li>
                                    <li><a href="#tab-messages" data-toggle="tab">优惠券列表</a></li>
                                </ul>								
								
                                <div id="generalTabContent" class="tab-content">
									<!-- 类别录入开始 -->
                                    <div id="tab-edit" class="tab-pane fade in active">
                                        <form action="/BeautyClub/ticket/create.do" id="ticketForm" method="post" class="form-horizontal">
                                            <h3>优惠券信息</h3>
                                            <div class="form-group"><label class="col-sm-3 control-label">优惠券名称</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-9">
															<input type="text" placeholder="请输入优惠券名称" name="tName" class="form-control ticket-name"/>
															<input type="hidden" value="" name="cId"/>
														</div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="form-group"><label class="col-sm-3 control-label">开始日期</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4">
                                                        	<input size="16" type="text" value="" name="startTime" class="form_datetime form-control start-Time">
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> 
											
                                            <div class="form-group"><label class="col-sm-3 control-label">结束日期</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4">
                                                        	<input size="16" type="text" value="" name="endTime" class="form_datetime form-control end-Time">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>                                           
                                            <div class="form-group"><label class="col-sm-3 control-label">优惠券描述</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-9"><textarea rows="3" name="description" class="form-control description"></textarea></div>
                                                    </div>
                                                </div>
                                            </div>											
                                            <hr/>                                            
                                            <button type="submit" class="btn btn-green btn-block" onclick="submitTicket();return false;">提 交</button>
                                        </form>
                                    </div>
									<!-- 类别录入结束 -->
									
									<!-- 类别列表开始 -->
                                    <div id="tab-messages" class="tab-pane fade in">
                                        <div class="row mbl"></div>
                                        <div class="list-group ticket-list">
											<!-- 优惠券列表 -->																					
										</div>										
										
                                        <div class="dibu" id="pageDiv">
                                        	<div class="dibu-l">
                 								<p>共找到<span style="color:#4bc5c3;" id="totalCount">0</span>条记录，每页20条</p>                 								
             								</div>           								
             								<div class="dibu-r">
             									<a href="javascript:void(0)" id="prePage">&lt;&lt;首页</a>																							
                  								<ul id="newpage">                     								
                  								</ul>
                  								<a href="javascript:void(0)" id="postPage">尾页&gt;&gt;</a>                  								
             								</div>
         								</div>                                    	
										
                                    </div>
									<!-- 类别列表结束 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 页面内容结束 -->

<script src="script/jquery-1.10.2.min.js"></script>
<script src="script/jquery-migrate-1.2.1.min.js"></script>
<script src="script/jquery-ui.js"></script>
<script src="script/bootstrap.min.js"></script>
<script src="script/bootstrap-hover-dropdown.js"></script>
<script src="script/html5shiv.js"></script>
	
<script src="script/jquery.metisMenu.js"></script>
<script src="script/jquery.slimscroll.js"></script>
<script src="script/icheck.min.js"></script>
    
<script src="script/jquery.menu.js"></script>
<script type="text/javascript" src="script/layer/layer.js"></script>	
<!--CORE JAVASCRIPT-->
<script src="script/main.js"></script>
<script src="script/myjs/reserve.js"></script>

<script src="script/bootstrap-datetimepicker.js"></script>
<script src="script/bootstrap-datetimepicker.min.js"></script>
<script src="script/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(".form_datetime").datetimepicker({
		format: "yyyy-mm-dd",
		autoclose: true,
		todayBtn: true,
		todayHighlight: true,
		showMeridian: true,
		pickerPosition: "bottom-left",
		language: 'zh-CN',//中文，需要引用zh-CN.js包
		startView: 3,//年视图
		minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
	});
</script>
<script>
//提交优惠券录入
function submitTicket() {
	var cName = $(".ticket-name").val();
	if(cName==null || cName==""){
		layer.alert("请输入优惠券名！",{icon:0});		
		return false;
	}		
	var startTime = $(".start-Time").val();
	if(startTime==null || startTime==""){
		layer.alert("请输入开始日期！",{icon:0});
		return false;
	}
	var endTime = $(".end-Time").val();
	if(endTime==null || endTime==""){
		layer.alert("请输入结束日期！",{icon:0});
		return false;
	}
	$.ajax({
		type: "POST",
		url:"/BeautyClub/ticket/create.do",
		data:$('#ticketForm').serialize(),// 你的formid	
	    error: function(data) {		    	     
	    	layer.alert("与服务器连接失败！",{icon:2});
	    },
	    success: function(data) {
	    	if(data == true){
	    		$(".ticket-name").val("");
	    		$(".start-Time").val("");
	    		$(".end-Time").val("");
	    		$(".description").val("");
	    		layer.alert("提交成功！",{icon:1});
            }else{
            	layer.alert(data,{icon:2});
            }
	    }
	});		
}

var pageCount = 1;
var currentPage = 0;

var deleteFlag=false;
/**
 * 获取优惠券信息
 */
function getTicket(obj){
	if(!deleteFlag && (obj == 0 || obj == currentPage || obj > pageCount))
		return false;
	var divNode = $(".ticket-list");
	size = 20;
	var url = "/BeautyClub/ticket/ticket_list.do?page="+obj+"&size="+size;
	jQuery.post(url,{},function(data)
	{
		var innerHtm = "";
		if(data!=null && data!="" && data.length>0)
		{			
			for(var i=1;i<data.length;i++)
			{				
				var tId = data[i].tId==null?"":data[i].tId;
				var tName = data[i].tName==null?"":data[i].tName;
				var description = data[i].description==null?"":data[i].description;
				var startTime = data[i].startTime==null?"":data[i].startTime;
				var endTime = data[i].endTime==null?"":data[i].endTime;
				var time = data[i].time==null?"":new Date(data[i].time);
				innerHtm+="<a class='list-group-item' style='cursor:default'>";
				innerHtm+="<input type='hidden' value='"+tId+"'/>";
				innerHtm+="<span style='min-width: 120px; display: inline-block;' class='name'>"+tName+"</span>";
				innerHtm+="<span style='min-width: 200px; display: inline-block;'>"+startTime.toLocaleString()+"&nbsp;-&nbsp;"+endTime.toLocaleString()+"</span>&nbsp;&nbsp;";
				innerHtm+="<span style='font-size: 11px;' class='text-muted'>"+description+"</span>";
				innerHtm+="<span class='badge'>"+time.toLocaleString()+"</span>";
				innerHtm+="<span class='pull-right mrl'>";				
				innerHtm+="<i class='fa fa-trash-o delete-Ticket' style='cursor:pointer' onclick='deleteTicket(this);'>&nbsp;删除</i>";				
				innerHtm+="</span></a>";				
			}
			
			var totalCount = data[0].status==null?0:data[0].status;
			$("#totalCount").text(totalCount);
			var pageNode = $('#newpage');
			var pageInner = "";
			if(totalCount == 0){
				innerHtm+="<a class='list-group-item' style='cursor:default'><center><span>未能找到结果！</span></center></a>";
				$(".dibu-r").hide();
			}else{
				var page = totalCount/parseInt(size)+(totalCount%parseInt(size)==0?0:1);				
				page = parseInt(page);				
				pageCount = page;				
				var j = 1;
				var k = page;
				if(obj > 4 && page > 7){
					pageInner += "<A ><li>...</li></A>";
					if(page - obj < 3)
						j = page-6;
					else
						j = (obj - 3) > 0?obj-3:1;
					k = (page - obj) > 3?obj+3:page;
				}
				for(var i=0;j<=k&&i<7;i++,j++){
					if(j == obj){
						pageInner += "<A ><li style='color:#fd9162'>"+j+"</li></A>";
						$("#prePage").attr("onclick","getTicket("+1+")");
						$("#postPage").attr("onclick","getTicket("+page+")");
						currentPage = obj;
					}
					else
						pageInner += "<A onclick='getTicket("+j+")'><li>"+j+"</li></A>";
				}
				if(page > 7 && page-obj > 3){
					pageInner += "<A ><li>...</li></A>";
				}
				deleteFlag = false;				
			}			
			pageNode.html(pageInner);			
			
		}else{
			innerHtm+="<a class='list-group-item' style='cursor:default'><center><span>未能找到结果！</span></center></a>";
			$(".dibu-r").hide();
		}
		divNode.html(innerHtm);	
	},"json");
}

//删除优惠券
function deleteTicket(obj){
	var a = $(obj).parents("a:first");
	var val = a.find("input").val();	
	layer.confirm('您确定要删除吗？', {
        closeBtn: 2,
        title: '提示',
        btn: ['确定', '取消']
    }, function (index, layero){
    	$.ajax({
            url:"/BeautyClub/ticket/delete_ticket.do",
            type:'POST',
            dataType:'json',
            contentType:"application/json",
            data:JSON.stringify({"tId":val}),
            async:false,
            success:function(data){
            	if(data==true){
            		deleteFlag = true;
            		getTicket(currentPage);
            		layer.msg('删除成功！', { icon: 6 });
            	}else{
            		layer.msg('删除失败！', { icon: 5 });
            	}
            },
            error:function(result){
            	layer.msg('删除失败！', { icon: 5 });
            }
        });
    	layer.close(index);
    }, function (index) {
        //取消按钮的回调函数（默认为关闭询问框）
    });
}
</script>
</body>
</html>
